<template>
        <span id="edit">
            <el-button size="medium" type="plain"  @click="isShowBox = true">编辑</el-button>
            <el-drawer
                    title="菜品信息编辑区域"
                    :before-close="handleClose"
                    :visible.sync="isShowBox"
                    direction="rtl"
                    :with-header="false"
                    custom-class="demo-drawer"
                    ref="drawer"
                    size="40%"
            >
            <div class="demo-drawer__content" id="editcontent">
                <el-form :model="editData" :rules="rules" ref="editData" style="margin-top: 150px" :label-width="formLabelWidth">
                     <el-form-item label="日期" prop="work_day">
                        <el-date-picker
                                v-model="editData.work_day"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="时间段" prop="time_slot" :label-width="formLabelWidth">
                        <el-select v-model="editData.time_slot" placeholder="时间段">
                            <el-option disabled label="请选择" value="" ></el-option>
                            <el-option label="8：00—14：00" value="1"></el-option>
                            <el-option label="14：00—22：00" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作人员"  prop="staff_id" :label-width="formLabelWidth">
                        <el-input v-model="editData.staff_id" placeholder="工作人员">
                             <template slot="append" >
                                <Transfer @selectPerson="SPerson"></Transfer>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer" id="footerdiv">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>
            </span>
</template>

<script>
    import Transfer from '../../components/houtai/transfer'
    import {mapActions} from 'vuex'
    export default {
        components:{
            Transfer
        },
        props:['editData'],
        data() {
            return {
                value1:'',
                isShowBox: false,
                loading: false,
                formLabelWidth: '100px',

                rules: {
                    work_day: [
                        { required: true, message: '请选择日期', trigger: 'blur' },
                    ],
                    time_slot: [
                        { required: true, message: '请选择时间段', trigger: 'blur' },
                    ],
                    staff_id: [
                        { required: true, message: '请输入工作人员', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            SPerson:function(selectPerson){
                // console.log(selectPerson)
                // console.log(selectPerson)
                this.editData.g_person =selectPerson.toString()
            },
            modify1() {
                this.$notify.success({
                    title: '成功',
                    message: '编辑成功！',
                    offset:50
                });
            },
            modify2() {
                this.$notify.error({
                    title: '错误',
                    message: '网络出故障了，编辑失败，请稍后重试！'
                });
            },
            ...mapActions(['getCurrentDataA']),
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$refs.editData.validate((valid) => {
                    if(valid){
                        this.$confirm('确定要提交修改的表单吗？')
                            .then(_ => {
                                //在这里获取编辑之后的数据  操作数据库数据
                                // console.log(this.editData)
                                this.$axios({
                                    url: '/EditArrange',
                                    method: 'post',
                                    data: {data: this.editData}
                                }).then(res => {
                                    // console.log(res.status)
                                    if (res.code === 200) {
                                        this.$emit('queren')
                                        this.loading = true;
                                        this.timer = setTimeout(() => {
                                            done();
                                            // 动画关闭需要一定的时间
                                            setTimeout(() => {
                                                this.loading = false;
                                            }, 200);
                                        }, 200);
                                        this.modify1()
                                    }
                                }).catch(err => {
                                    this.$emit('queren')
                                    this.modify2()
                                })


                            })
                            .catch(_ => {
                                this.$emit('queren')
                            });
                    } else {
                        this.$notify.error('请检查提交数据的正确性！是否满足提示要求？')
                    }

                })

            },
            cancelForm() {
                this.$emit('queren')
                this.loading = false;
                this.isShowBox = false;
                clearTimeout(this.timer);
            }
        } ,
    }

</script>
<style scoped>
    #edit{
        margin-right: 20px;
    }
    .el-input{
        width: 300px;
    }
    #footerdiv{
        margin-left: 100px;
    }
</style>